<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>PROJECT×ZO×UI Plugin</title>
  <!-- Bootstrap -->
  <link href="/static/lib/css/bootstrap.min.css" rel="stylesheet">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="static/lib/js/html5shiv-3.7.2.min"></script>
  <script src="static/lib/js/respond-1.4.2.min"></script>
  <![endif]-->
  <link href="/widget/css/common.css" rel="stylesheet">
  <link href="/widget/css/zoui.css" rel="stylesheet">
  <link href="/widget/css/page.css" rel="stylesheet">
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="/static/lib/js/jquery-1.11.3.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="/static/lib/js/bootstrap.min.js"></script>
  <script src="/widget/js/zoui.js"></script>
</head>
<body>
  <div class="container-fluid">
    <section class="row ZDimensions-box">
      <h1 class="ZH1">001.获取页面可视区域高宽度</h1>
      <h4 class="ZH4">
        001.1.获取可视区域宽度：$.ZScreenWidth()
        <br>
        001.2.获取可视区域高度：$.ZScreenHeight()
      </h4>
      <p class="ZKey">
        <span>VIEW</span>
      </p>
      <div class="view-box">
        <form class="form-inline">
          <div class="form-group">
            <input class="form-control input-ZScreenWidth" type="text" disabled value="点击按钮获取宽度"></div>
          <div class="form-group">
            <input class="form-control input-ZScreenHeight" type="text" disabled value="点击按钮获取高度"></div>
          <button class="btn btn-default" type="button">CLICK</button>
        </form>
      </div>
      <p class="ZKey">
        <span>HTML</span>
      </p>
      <div class="code-box">
        <xmp><form class="form-inline">
  <div class="form-group">
    <input class="form-control input-ZScreenWidth" type="text" disabled value="点击按钮获取宽度"></div>
  <div class="form-group">
    <input class="form-control input-ZScreenHeight" type="text" disabled value="点击按钮获取高度"></div>
  <button class="btn btn-default" type="button">CLICK</button>
</form></xmp>
      </div>
      <script>
        $(function() {
          $('.ZDimensions-box').on('click', 'button', function() {
            $('.input-ZScreenWidth').attr('value', $.ZScreenWidth());
            $('.input-ZScreenHeight').attr('value', $.ZScreenHeight());
          });
        });
      </script>
      <p class="ZKey">
        <span>CSS</span>
      </p>
      <div class="code-box">NULL</div>
      <p class="ZKey">
        <span>JS</span>
      </p>
      <div class="code-box">
        <xmp>$(function() {
  $('.ZDimensions-box').on('click', 'button', function() {
    $('.input-ZScreenWidth').attr('value', $.ZScreenWidth());
    $('.input-ZScreenHeight').attr('value', $.ZScreenHeight());
  });
});</xmp>
      </div>
      <p class="ZKey">
        <span>API</span>
      </p>
      <div class="table-box table-responsive">
        <table class="table table-striped table-bordered table-hover">
          <tbody>
            <tr>
              <th width="120">方法</th>
              <th width="120">参数</th>
              <th width="120">类型</th>
              <th width="120">默认值</th>
              <th>说明</th>
            </tr>
            <tr>
              <td> <b>ZScreenWidth</b>
              </td>
              <td>NULL</td>
              <td>NULL</td>
              <td>NULL</td>
              <td class="caption">获取页面宽度</td>
            </tr>
            <tr>
              <td> <b>ZScreenHeight</b>
              </td>
              <td>NULL</td>
              <td>NULL</td>
              <td>NULL</td>
              <td class="caption">获取页面高度</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>
<script type="text/javascript" charset="utf-8" src="http://192.168.1.15:8132/livereload.js"></script></body>
</html>